<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="alert alert-danger" role="alert">*默认查询当月所有的考试信息，可以选择时间查询其他考试信息，时长考试为创建时间查询</div>
    <div id="exam_part_one">
        <form class="form-inline">
            <div class="form-group">
                <label for="exam_name">考试名称</label>
                <input style="width: 120px" type="text" id="exam_name" class="form-control"/>
            </div>
            <div class="form-group">
                <label for="exam_type">考试类型</label>
                <select style="width: 120px" id="exam_type" class="form-control">
                    <option>==请选择==</option>
                    <option>期中</option>
                    <option>期末</option>
                    <option>补考</option>
                    <option>重修</option>
                    <option>测试</option>
                </select>
            </div>
            <div class="form-group">
                <label for="exam_status">考试状态</label>
                <select style="width: 120px" id="exam_status" class="form-control">
                    <option>==请选择==</option>
                    <option>未发布</option>
                    <option>未考试</option>
                    <option>考试中</option>
                    <option>完成考试</option>
                    <option>丢弃</option>
                </select>
            </div>
            <div class="form-group">
                <label>考试时间</label>
                <input type="datetime-local"  id="exam_start_time" class="form-control"/>-<input type="datetime-local" id="exam_end_time" class="form-control"/>

            </div>
            <div class="form-group">
                <button onclick="exam.query()" type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span>查询</button>
            </div>
            <div class="form-group">
                <button onclick="exam.clearQuery()" type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span>清空查询</button>
            </div>
            <div style="float: right;padding-right: 20px" class="form-group">
                <button type="button" onclick="exam.addExam()" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span><span>新建考试</span></button>
            </div>
        </form>
    </div>
    <div id="exam_part_two">
        <table class="table table-hover">
            <thead>
                <tr>
                    <td style="width: 5%"><input type="checkbox"/></td>
                    <td style="width: 5%">序号</td>
                    <td style="width: 15%">考试名称</td>
                    <td style="width: 25%;">考试时间</td>
                    <td style="width: 20%">考试状态</td>
                    <td style="width: 30%">操作</td>
                </tr>
            </thead>
            <tbody>
                <th:block th:if="${pageVO==null || pageVO.params.size()==0}">
                    <tr><td colspan="6" align="center">没有任何查询记录</td></tr>
                </th:block>
                <th:block th:unless="${pageVO==null && pageVO.params.size()==0}">
                    <tr th:each="exam:${pageVO.params}">
                        <td><input type="checkbox" th:value="${exam.id}"></td>
                        <td th:text="${examStat.index+1}"></td>
                        <td th:text="${exam.name}"></td>
                        <td>
                            <!--因为现在对这个时间的转换还没有很了解  前端--实体---数据库   反转  这里就用一些很迂回的方式处理一下 等后面了解掌握好就不会犯错了-->
                            <span th:if="${exam.start_time!=null and exam.end_time!=nulll and exam.duration==null}" th:text="${#dates.format(exam.start_time,'yyyy-MM-dd HH:mm')+'~~'+#dates.format(exam.end_time,'yyyy-MM-dd HH:mm')}"></span>
                            <span th:if="${exam.duration!=null && exam.duration>0}" th:text="${exam.duration+'分钟'}"></span>
                            <span th:if="${exam.start_time==null and exam.end_time==null and exam.duration==null}">尚未填写考试时间</span>
                        </td>
                        <td>
                            <span th:oncontextmenu=" return exam.changeStatus1(event,[[${exam.id}]])" class="label label-default" th:if="${exam.status=='未发布'}" th:text="${exam.status}"></span>
                            <span th:oncontextmenu=" return exam.changeStatus2(event,[[${exam.id}]])" class="label label-info" th:if="${exam.status=='未考试'}" th:text="${exam.status}"></span>
                            <span th:oncontextmenu=" return exam.changeStatus3(event,[[${exam.id}]])" class="label label-danger" th:if="${exam.status=='考试中'}" th:text="${exam.status}"></span>
                            <span th:oncontextmenu=" return exam.changeStatus4(event,[[${exam.id}]])" class="label label-primary" th:if="${exam.status=='已完成'}" th:text="${exam.status}"></span>
                            <span class="label label-warning" th:if="${exam.status=='丢弃'}" th:text="${exam.status}"></span>
                            <span class="label label-warning" th:if="${exam.status==null}" >未添写考试状态</span>
                        </td>
                        <td><button th:onclick="exam.editPage([[${exam.id}]])" style="margin-left: 10px"  class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span>编辑</button><td>
                    </tr>
                </th:block>
            </tbody>
        </table>
        <nav th:if="${pageVO.params!=null && pageVO.params.size()!=0}" id="nav" aria-label="Page navigation">
            <ul class="pagination">
                <li th:if="${pageVO.page==1} " class="disabled">
                    <a href="javascript:void(0)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:unless="${pageVO.page==1}" >
                    <a th:onclick="|exam.limitQuery(${pageVO.page}-1)|" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>


                <li  th:class="${pageVO.page==index?'active':''}" th:each="index:${#numbers.sequence(pageVO.pageStart,pageVO.pageEnd)}" th:value="${index}">
                    <a th:onclick="|exam.limitQuery(${index})|" th:text="${index}"></a>
                </li>


                <li th:if="${pageVO.page==pageVO.realPage}" class="disabled">
                    <a href="javascript:void(0)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li th:unless="${pageVO.page==pageVO.realPage}" >
                    <a th:onclick="|exam.limitQuery(${pageVO.page}+1)|" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>